<template>
	<view class="time">
		<view class="status_bar">
		</view>
		<view class="header-time">

			<view class="header-info">
				<image :src="userinfo.avatar" mode="aspectFit"></image>
				<text>{{ userinfo.nickname }} {{ today }}</text>
			</view>
		</view>
		<view class="calendar-time">
			<wu-calendar class="content4" :selected="dateList" :date="today" color="#D5EBFF" @foldSwitch="foldSwitch"
				ref="calendarTime" type="week" :insert="true" @change="calendarChange">
				<template v-slot:header>
					<view class="custom-header">
						<text class="content1 h3-title" @click="openExamPopup">查看考试日期</text>
						<text class="content2 h3-title" @click="openActionSheetTrain">查看培训安排</text>
						<view class="train-months">
							<text :class="onClassId == item.id ? 'on' : ''" @click="toMonths(item.id)"
								v-for="item in classList">{{ item.teamName }}</text>
						</view>
						<view class="time-right">
							<text @click="clickToDay" class="today">今天</text>
							<view class="fold-box content3">
								<view @click="FoldClick">{{ txt_fold }}</view>
								<view class="iconfont" :class="icon_fold"></view>
							</view>
						</view>
					</view>
				</template>
			</wu-calendar>
		</view>
		<view class="time-info">
			<template v-if="timeList.length > 0">
				<view class="time-info-left content5">
					<scroll-view scroll-y class="time-list-scroll">
						<view class="time-conent-list" :class="{ 'end': true, 'active': currentIndex === index }"
							@click="clickTime(item, index)" v-for="(item, index) in timeList" :key="index">
							<view class="time-range">
								<text>{{ item.startTime }}</text>
								<text class="line"></text>
								<text>{{ item.endTime }}</text>
							</view>
							<view class="time-conent-icon" :class="getTimeStatus(item).status">
								<view class="iconfont" :class="getTimeStatus(item).icon"></view>
								<text>{{ getTimeStatus(item).text }}</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="time-info-right">
					<scroll-view scroll-y class="time-info-scroll">
						<view class="list-item-box" v-for="item in itemData">
							<view class="list-item">
								<view class="list-item-img">
									<view class="tips" v-if="!canClock(item) && item.mode != '1'">
										<view class="iconfont" :class="{
											'icon-yijieshu1': getStatusText(item) === '已结束',
											'icon-weikaishi': getStatusText(item) === '未开始'
										}">
										</view>
									</view>
									<text class="status-label" v-if="!canClock(item) && item.mode != '1'">{{
										getStatusText(item) }}</text>
									<image :src="item.pic" mode="aspectFill"></image>
								</view>
								<view class="list-item-mid">
									<view class="list-item-title">
										<text class="h1">{{ item.title }}</text>
										<text class="tag" :class="getStatusClass(item)">{{ getStatusText(item) }}</text>
									</view>

									<text class="list-item-intro">{{ item.chaptersTitle }}</text>
									<view class="list-item-info">
										<text class="list-item-teacher">代课老师：{{item.chapterTeachers.map(teacher =>
											teacher.name).join(',')}}</text>
										<text class="list-item-room">教室：{{ item.room }}</text>
									</view>
									<view class="list-item-room-wrapper" v-if="item.location"
										@click="navigateToAddress(item)">
										<text class="list-item-room address-text">培训地址：{{ item.address }}</text>
										<uni-icons type="location" color="$uni-color-primary" v-if="item.location"
											style="font-size: 24rpx; margin-left: 10rpx;">导航</uni-icons>
									</view>
									<!-- {{ parseTime(item.startTime, '{m}-{d} {h}:{i}') }} -->
								</view>

								<view class="list-item-progress progress-box" v-if="item.mode != '1'">
									<view class="progress-header">
										<text>培训进度 {{ item.mode }}</text>
										<view class="progress-stats">
											<text class="progress-value">{{ item.progress || 0 }}/{{ item.progressTotal
												|| 4
											}}</text>
											<text class="percentage">{{ Math.round((item.progress || 0) /
												(item.progressTotal || 4) * 100) || 0 }}%</text>
										</view>
									</view>
									<uv-line-progress
										:percentage="Math.round((item.progress || 0) / (item.progressTotal || 4) * 100)"
										:showText="false" height="8" activeColor="#0086FF"
										inactiveColor="#E5E8EF"></uv-line-progress>
								</view>
								<view class="list-item-progress progress-box score-box" v-if="item.mode == '1'">
									<view class="progress-header">
										<text class="score-title">模拟成绩</text>
										<text class="exam-count">模拟次数：{{ item.scoreModel.examCount || 0 }}</text>
									</view>
									<view class="score-details">
										<view class="score-item">
											<text class="label">最高分：</text>
											<text class="value max-score">{{ item.scoreModel.maxScore || '-' }}</text>
										</view>
										<view class="score-item">
											<text class="label">最低分：</text>
											<text class="value min-score">{{ item.scoreModel.minScore || '-' }}</text>
										</view>
										<view class="last-time" v-if="item.scoreModel.lastTime">
											<text class="label">最后模拟：</text>
											<text class="value">{{ parseTime(item.scoreModel.lastTime, '{m}-{d} {h}:{i}') }}</text>
										</view>
									</view>
									<view class="score-list"
										v-if="item.scoreModel.listScore && item.scoreModel.listScore.length">
										<text class="label">历史成绩：</text>
										<text class="value">{{ item.scoreModel.listScore.join(', ') }}</text>
									</view>
								</view>
								<view class="list-item-bottom">
									<button @click="clockClickPopup(item)" class="btn sign" :class="{
										'disabled': !canClock(item),
										'punched': item.punch
									}" hover-class="is-hover" v-if="item.mode != '1'">
										{{ getClockButtonText(item) }}
									</button>
									<button class="btn look" @click="lookTraining(item)" hover-class="is-hover">
										培训项目
									</button>
									<button class="btn info" @click="infoTraining(item)" hover-class="is-hover">
										培训资料
									</button>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</template>
			<template v-else>
				<view class="empty-state">
					<uv-empty mode="car" icon="/static/notData.png" text="暂无课程"></uv-empty>
				<!-- 	<uv-button :custom-style="{
						width: '250rpx',
						height: '70rpx',
						borderRadius: '8rpx',
						background: '#FD3523',
						border: 'none'
					}" type="primary" @click="addCourse">添加课程</uv-button> -->
				</view>
			</template>
		</view>
		<uv-popup ref="clockPopup" round="15" bgColor="#fff" mode="bottom" :closeable="true" @change="clockPopupChange">
			<view class="clock_popup">
				<text class="clock-title">
					{{ clockItem.title }}
				</text>
				<text class="clock-teacher">
					代课老师：{{clockItem.chapterTeachers?.map(teacher => teacher.name).join(',') || ''}}
					{{ parseTime(clockItem.startTime, '{h}:{i}') }}-{{ parseTime(clockItem.endTime, '{h}:{i}') }}
				</text>
				<view class="clock-btn" @click="clokcClick">
					<text>打卡</text>
					<view class="clock-time">
						<text>{{ currentTime }}</text>
						<text style="font-size: 24rpx;">{{ currentSeconds }}</text>
					</view>
				</view>
				<view class="location-box">
					<view class="location-info" @click="navigateToAddress(clockItem)">
						<view class="iconfont icon-dingwei"></view>
						<text>{{ clockItem?.infoAddress?.name }}</text>
					</view>
					<view class="iconfont icon-gengxin" @click="getLocationAndCheck"></view>
				</view>
			</view>
		</uv-popup>
		<!-- <uv-notify ref="clockNotify" :duration="notify_data.duration">
			<template v-slot:icon>
				<view class="clockNotify">
					<view class="iconfont" :class="notify_data.icon">
					</view>
				</view>
			</template>
			<template v-slot:iconlast v-if="notify_data.type == 'warning'">
				<view class="clockNotify" style="margin-left: 14rpx;font-weight: 700;">
					<text>点击打开</text>
					<view class="iconfont icon-dakai" style="font-size: 45rpx;">
					</view>
				</view>
			</template>
		</uv-notify> -->
		<guideStep v-if="isGuide" :step="step"></guideStep>
		<uv-toast ref="toast"></uv-toast>
		<!-- 考试培训时间提示弹窗 -->
		<uv-popup ref="examPopup" :closeOnClickOverlay="false" mode="center" round="15">
			<view class="exam-popup">
				<view class="popup-header">
					<text class="title">培训考试时间安排</text>
					<view class="header-desc">
						<text class="iconfont icon-tishi"></text>
						<text>请认真查看您的培训和考试时间安排</text>
					</view>
				</view>

				<!-- 班级切换tabs -->
				<view class="class-tabs">
					<scroll-view scroll-x class="tabs-scroll" :show-scrollbar="false" :scroll-with-animation="true"
						:enhanced="true" :scroll-into-view="'tab-' + currentTabIndex">
						<view class="tabs-list">
							<view v-for="(item, index) in examData" :key="index" :id="'tab-' + index" class="tab-item"
								:class="{ active: currentTabIndex === index }" @click="switchTab(index)">
								<text class="tab-name">{{ item.courseName || '' }}{{ item.teamName || '' }}</text>
								<view class="tab-badge" v-if="item.unconfirmed">!</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<scroll-view scroll-y class="exam-content">
					<view class="exam-item" v-if="currentClass">
						<!-- 班级课程信息 -->
						<view class="course-info">
							<view class="info-left">
								<text class="iconfont icon-banji"></text>
								<text class="team-name">{{ currentClass.teamName || '' }}</text>
								<text class="divider">|</text>
								<text class="course-name">{{ currentClass.courseName || '' }}</text>
							</view>
						</view>

						<!-- 考试时间卡片 -->
						<view class="exam-card">
							<view class="card-title">
								<text class="iconfont icon-kaoshi"></text>
								<text>考试安排</text>
							</view>
							<view class="exam-times">
								<!-- 理论考试 -->
								<template v-if="currentClass.theoryTime">
									<view class="time-item">
										<view class="time-header">
											<text class="exam-type">理论考试</text>
										</view>
										<view class="time-info">
											<!-- <text class="iconfont icon-shijian"></text> -->
											<text class="date">初考时间：{{ parseTime(currentClass.theoryTime,
												'{y}年{m}月{d}日') }}</text>
											<text class="time">{{ parseTime(currentClass.theoryTime, '{h}:{i}')
											}}</text>
										</view>
										<view class="retake-info" v-if="currentClass.theoryRetakeTime">
											<text class="iconfont icon-bukao"></text>
											<text>补考时间：{{ parseTime(currentClass.theoryRetakeTime, '{m}月{d}日 {h}:{i}')
											}}</text>
										</view>
									</view>
								</template>

								<!-- 实操考试 -->
								<template v-if="currentClass.practicalTime">
									<view class="time-item">
										<view class="time-header">
											<text class="exam-type">实操考试</text>
										</view>
										<view class="time-info">
											<!-- <text class="iconfont icon-shijian"></text> -->
											<text class="date">初考时间：{{ parseTime(currentClass.practicalTime,
												'{y}年{m}月{d}日') }}</text>
											<text class="time">{{ parseTime(currentClass.practicalTime, '{h}:{i}')
											}}</text>
										</view>
										<view class="retake-info" v-if="currentClass.practicalRetakeTime">
											<text class="iconfont icon-bukao"></text>
											<text>补考时间：{{ parseTime(currentClass.practicalRetakeTime, '{m}月{d}日 {h}:{i}') }}</text>
										</view>
									</view>
								</template>
								<view class="exam-item-footer"
									v-if="!currentClass.theoryTime && !currentClass.practicalTime">
									<text class="iconfont icon-tishi"></text>
									<text>考试时间安排中,请耐心等待</text>
								</view>
							</view>
						</view>

						<!-- 培训安排 -->
						<view class="training-card">
							<view class="card-title">
								<text class="iconfont icon-peixun"></text>
								<text>培训安排</text>
							</view>
							<view class="chapter-list" v-if="currentClass.course && currentClass.course.chapters">
								<view v-for="(chapter, cIndex) in currentClass.course.chapters" :key="cIndex"
									class="chapter-item">
									<view class="chapter-header">
										<text class="iconfont icon-kecheng"></text>
										<text class="chapter-name">{{ chapter.title }}</text>
									</view>
									<view class="date-list" v-if="chapter.times && chapter.times.length">
										<view v-for="(date, dIndex) in chapter.times" :key="dIndex" class="date-item">
											<view class="date-header">
												<text class="iconfont icon-riqi"></text>
												<text class="date">{{ parseTime(date.startTime, '{y}年{m}月{d}日')
												}}</text>
											</view>
											<view class="time-list">
												<text class="time">
													<text class="iconfont icon-shijian"></text>
													{{ parseTime(date.startTime, '{h}:{i}') }}-{{
														parseTime(date.endTime,'{h}:{i}') }}
												</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>

				<view class="popup-footer">
					<button class="confirm-btn" :disabled="needCountdown && countdown > 0"
						:class="{ 'disabled': needCountdown && countdown > 0 }" @click="confirmSchedule">
						<text class="iconfont icon-queding"></text>
						<text>
							<template v-if="currentTeam.confirmDate">
								{{ hasNextTeam ? '查看下一个班级' : '关闭' }}
							</template>
							<template v-else>
								{{ countdown > 0 ? `${countdown}秒后可确认` : '我已了解时间安排' }}
							</template>
						</text>
					</button>
				</view>
			</view>
		</uv-popup>
		<uv-notify ref="trainNotify" :message="trainNotifyMessage" type="success"></uv-notify>
		<uv-action-sheet ref="actionSheetTrain" :actions="listTrain" title="培训选择" @select="selectTrain"
			@close="closeTrain">
		</uv-action-sheet>
		<!-- <uni-fab
            ref="fab"
            horizontal="right"
            vertical="bottom"
			:popMenu="false"
            :pattern="{ iconColor: '#ffffff', backgroundColor: '#0086FF' }"
            @fabClick="previewQRCode"
        /> -->
		<view class="custom-fab" v-if="token" @click="previewQRCode">
			<view class="iconfont icon-erweima"></view>
		</view>

		<!-- 二维码弹窗 -->
		<uv-popup ref="qrCodePopup" mode="center" overlay :closeOnClickOverlay="false" round="15" :closeable="true"
			:custom-style="{ width: '90%' }" @change="qrCodePopupChange">
			<view class="qrcode-popup-content">
				<text class="title">学员信息</text>

				<!-- Tabs for multiple courses -->
				<view v-if="examData.length > 1" class="popup-tabs">
					<scroll-view scroll-x class="tabs-scroll" :show-scrollbar="false" :scroll-with-animation="true"
						:enhanced="true">
						<view class="tabs-list">
							<view v-for="(item, index) in examData" :key="index" class="tab-item"
								:class="{ active: qrCodePopupCurrentTab === index }" @click="switchQrCodeTab(index)">
								<text class="tab-name">{{ item.courseName || '' }}{{ item.teamName || '' }}</text>
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="info-item">
					<text class="label">姓名：</text>
					<text class="value">{{ userinfo.nickname }}</text>
				</view>
				<view class="info-item">
					<text class="label">手机号码：</text>
					<text class="value">{{ userinfo.phone || '未绑定' }}</text>
				</view>
				<view class="info-item">
					<text class="label">身份证号码：</text>
					<text class="value">{{ userinfo.identity || '未绑定' }}</text>
				</view>

				<view class="info-item">
					<text class="label">操作项目：</text>
					<!-- Use computed property for current item data -->
					<text class="value">{{ currentQrCodeItem.courseName || '' }}{{ currentQrCodeItem.teamName || ''
						}}</text>
				</view>
				<!-- <image class="qrcode-image" :src="qrCodeSrc" mode="aspectFit"></image> -->
				<tki-qrcode ref="qrcode" :val="qrCodeData" :size="300" unit="rpx" background="#ffffff"
					foreground="#000000" pdground="#000000" :icon="''" :iconSize="40" :lv="3" :onval="false"
					:loadMake="true" :showLoading="true" loadingText="生成中..." class="qrcode-component"></tki-qrcode>
				<text class="tips">请向培训老师出示此二维码</text>
			</view>
		</uv-popup>
	</view>
</template>

<script>

import {
	getMyTeamList,
	getChapterDateList,
	getCourseDateList,
	getDateList,
	punchClock,
	confirmExamDate,
	getDetail,
	getConfigList
} from '@/http/user.js'
import {
	parseTime
} from '@/utils/tools.js'
import guideStep from "@/components/xky-guideStep/xky-guideStep.vue";
import WebSocketClient from '@/utils/webSocket.js'
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue" // 导入 tki-qrcode 组件

export default {
	components: {
		guideStep,
		tkiQrcode // 注册 tki-qrcode 组件
	},
	data() {
		return {
			isGuide: false,
			trainNotifyMessage: '',
			step: {
				repeat: true, // 是否重复展示
				guideList: [
					{
						el: '.content1',
						tips: '点击查看你的考试时间安排',
						style: "border-radius: 8rpx;margin: 0",
						next: "下一步"
					},
					{
						el: '.content2',
						tips: '点击查看你的培训时间安排',
						style: "border-radius: 8rpx;margin: 0",
						next: "下一步"
					},
					{
						el: '.content3',
						tips: '点击按月查看你的培训日期',
						style: "border-radius: 8rpx;margin: 0",
						next: "完成"
					}
				]
			},
			currentTime: '', // 当前时间
			currentSeconds: '', // 当前秒
			timer: null, // 定时器
			icon_fold: 'icon-down2',
			txt_fold: '展开',
			today: '2024-10-12',
			dateList: [],
			menuButtonInfo: '',
			timeInfoH: '100vh',
			todayData: '',
			clockItem: {}, // 打卡课程
			userinfo: {},
			onClassId: '',
			classList: [], // 我的级列表
			classShow: false,
			selectedDate: '', // 默认选择的日期
			timeList: [],
			timeQuery: {},
			itemData: [],
			currentIndex: 0, // 使用索引替代 ID
			statusBarHeight: 0,
			navBarHeight: 0,
			calendarHeight: 0,
			config: {}, // 配置
			imgList: [], // 图片列表
			wsClient: null,
			examData: [],
			hasConfirmed: false, // 是否已确认时间安排
			countdown: 10, // 倒计时初始值
			startTime: 0, // 开始时间戳
			endTime: 0,   // 结束时间戳
			timer: null,   // requestAnimationFrame的ID
			currentTabIndex: 0, // 当前选中的tab索引
			listTrain: [], //培训课程列表
			qrCodeData: '', // 用于 tki-qrcode 的数据
			qrCodeLook: false, //是否点击二维码查看
			qrItemData: {}, //当前二维码数据 - MIGHT BE REDUNDANT NOW with currentQrCodeItem
			qrCodePopupCurrentTab: 0, // Index for popup tabs
			nowDate: '', // 当前天年月日
			token: '',
		}
	},
	computed: {
		currentClass() {
			// 确保返回有效数据
			if (!this.examData || !this.examData.length) {
				return {
					teamName: '',
					courseName: '',
					courseType: '',
					course: {
						chapters: []
					}
				}
			}
			return this.examData[this.currentTabIndex] || this.examData[0]
		},
		// 是否还有下一个班级
		hasNextTeam() {
			return this.currentTabIndex < this.examData.length - 1
		},

		// 当前班级数据
		currentTeam() {
			return this.examData[this.currentTabIndex] || {}
		},

		// 判断当前班级是否需要倒计时
		needCountdown() {
			return !this.currentTeam.confirmDate
		},

		// Computed property for the data of the currently selected tab in the QR code popup
		currentQrCodeItem() {
			if (this.examData && this.examData.length > this.qrCodePopupCurrentTab) {
				return this.examData[this.qrCodePopupCurrentTab];
			}
			// Return a default structure if data is not available
			return {
				teamId: null,
				confirmDate: '',
				teamName: 'N/A',
				courseName: 'N/A',
				courseId: null,
				courseType: '',
				practicalTime: '',
				theoryTime: '',
				theoryRetakeTime: '',
				practicalRetakeTime: '',
				course: { chapters: [] }
			};
		},
	},
	onLoad() {

	},

	async onShow() {
		this.token = uni.getStorageSync('token')
		this.initWebSocket()
		getConfigList().then(res => {
			this.config = res.data
		})
		// 获取取系统信息
		const systemInfo = uni.getSystemInfoSync()
		// 状态栏高度
		this.statusBarHeight = systemInfo.statusBarHeight
		// 导航栏高度
		this.navBarHeight = 44 // 微信小程序固定导航栏高度
		// 获取日历组件高度（包含展开/收起状态）
		this.calendarHeight = 100 // 日历组默认高度

		try {
			this.todayData = this.parseTime(new Date(), '{m}-{d}')
			// this.selectData = 
			// #ifndef H5
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// #endif

			this.$nextTick(() => {
				this.updateTimeInfoHeight()
			})

			this.userinfo = await this.loadUserinfo()



			// 页面显示时加载数据，下拉刷新也会调用此方法
			await this.loadData()
		} catch (error) {
			console.error('onShow error:', error)
			uni.showToast({
				title: '加载失败，请重试',
				icon: 'none'
			})
		}
		// 检查是否需要显示弹窗
		this.$nextTick(() => {
			// 检查所有班级是否都已确认
			if (this.examData && this.examData.length > 0) {
				this.hasConfirmed = this.examData.every(item => !!item.confirmDate)
				if (!this.hasConfirmed) {
					this.showExamPopup()
				}
			}
		})
		// this.initData()
	},
	// 添加下拉刷新处理
	async onPullDownRefresh() {
		console.log('触发下拉刷新');
		try {
			await this.loadData();
		} finally {
			uni.stopPullDownRefresh(); // 停止下拉刷新动画
		}
	},
	methods: {
		parseTime,
		async loadUserinfo() {
			try {
				const res = await getDetail();
				if (res && res.data) {
					return res.data; // 返回获取到的用户数据
				} else {
					console.warn('loadUserinfo: No user data received or res.data is missing.');
					return {}; // 如果没有数据或res.data未定义，返回空对象
				}
			} catch (error) {
				console.error('Error in loadUserinfo:', error);
				return {}; // 发生错误时返回空对象
			}
		},
		async loadData() {
			// if (!this.userinfo || !this.userinfo.id) {
			// 	console.warn('用户信息不完整')
			// 	return
			// }

			try {
				this.nowDate = this.parseTime(new Date().getTime(), '{y}-{m}-{d}') // 获取当前日期 年月日
				console.log(this.nowDate, 'this.nowDate');
				this.$refs.calendarTime.backToday();
				this.today = this.nowDate 
				// 获取班级列表
				const res = await getMyTeamList()
				console.log(res, 'res');
				// 获取所有考试班级数据
				this.examData = res.data.map(item => ({
					teamId: item.id,
					confirmDate: item.confirmDate || '',
					teamName: item.teamName || '',
					courseName: item.courseName || '',
					courseId: item.courseId || '',
					courseType: item.courseType || '',
					practicalTime: item.practicalTime || '',
					theoryTime: item.theoryTime || '',
					theoryRetakeTime: item.theoryRetakeTime || '',
					practicalRetakeTime: item.practicalRetakeTime || '',
					mode: item.mode || '',
					course: {
						chapters: item.course?.chapters.map(chapter => ({
							...chapter
						}))
					}
				}))

				const classRes = await getDateList()
				if (classRes && classRes.data) {
					this.dateList = classRes.data.map(item => {
						return {
							date: item.date,
							info: '培训',
							infoColor: item.punch ? '#0086ff' : 'red',
							badgeColor: item.punch ? '#0086ff' : 'red',
							badge: item.punch,
						}
					}) || []
					this.selectedDate = this.parseTime(new Date().getTime(), '{y}-{m}-{d} {h}:{i}') // 获取当前时间
					let params = {
						date: this.parseTime(this.selectedDate, '{y}-{m}-{d}')
					}
					
					// 获取所有班级日期列表用于展示日历
					const dateRes = await getCourseDateList(params)
					this.timeList = dateRes.data
					// 如果有培训时间则显示第一个培训时间
					if (this.timeList.length > 0) {
						this.timeQuery = {
							start: this.nowDate + ' ' + this.timeList[0].startTime,
							end: this.nowDate + ' ' + this.timeList[0].endTime,
						}
						// 设置今天的日期为开时间的日期部分
					}

					await this.loadChapterDateList()
					if (this.hasConfirmed) {
							this.isGuide = true
						}
					console.log(this.examData, 'this.examData');
				}
			} catch (err) {
				console.error('加载数据失败:', err)
				// uni.showToast({
				// 	title: '加载失败',
				// 	icon: 'none'
				// })
			}
		},
		clickTime(item, index) {
			this.currentIndex = index
			this.timeQuery = {
				// date: new Date(this.selectedDate).getTime(),
				start: this.combineDateTimeToTimestamp(this.selectedDate, item.startTime),
				end: this.combineDateTimeToTimestamp(this.selectedDate, item.endTime)
			}

			this.loadChapterDateList()
		},

		async loadChapterDateList() {
			console.log(this.timeQuery, 'this.timeQuery');
			
			try {
				const res = await getChapterDateList(this.timeQuery)
				console.log(res.data, 'getChapterDateList');
				// 将返回的数据转换为 itemData 格式
				this.itemData = res.data.map(course => {

					// 处理所章节
					const chapterData = course.chapters?.map(chapter => {

						const firstDate = chapter.times[0]
						console.log(firstDate, 'firstDate', firstDate.startTime);

						return {
							teamId: course.teamId,
							id: chapter.id,
							courseid: course.id,
							title: course.title,
							opc: course.opc,
							chaptersTitle: chapter.title || '',
							chapterId: chapter.id,
							datesId: firstDate.id,
							startTime: firstDate.startTime,
							endTime: firstDate.endTime,
							timesId: firstDate.id,
							type: course.type || 0,
							room: firstDate.room || '',
							address: firstDate.address || '',
							location: firstDate.location || '',
							punch: firstDate.punch,
							plan: chapter.plan,
							pic: chapter.pic,
							mode: chapter.mode,
							scoreModel: chapter.scoreModel,
							progress: chapter.plan?.split('/')[0],
							progressTotal: chapter.plan?.split('/')[1],
							chapterItems: chapter.chapterItems || [],
							chapterTeachers: firstDate.teachers || []
						}
					}) || []
					console.log(chapterData, ' chapterData');


					// 如果没有章节数据，返回一个默认结构
					// if (chapterData.length === 0) {
					// 	return {
					// 		id: course.id,
					// 		title: course.title,
					// 		chaptersTitle: '',
					// 		chapterId: null,
					// 		datesId: null,
					// 		timesId: null,
					// 		opc: course.opc,
					// 		type: course.type || 0,
					// 		room: '',
					// 		address: '',
					// 		location: '',
					// 		punch: false,
					// 		chapterItems: [],
					// 		chapterTeachers: []
					// 	}
					// }

					// 返回所有章节数据
					return chapterData
				}).flat()

				console.log('换后的数据:', this.itemData)
			} catch (err) {
				console.error('加载章节数据失败:', err)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			}
		},
		addCourse() {
			uni.switchTab({
				url: '/pages/courses/courses'
			})
		},
		// 修改打卡弹窗方法
		clockClickPopup(item) {
			console.log(item, 'item');
			if (item.punch) {
				uni.showToast({
					title: '已完成打卡',
					icon: 'none'
				})
				return
			}

			if (!this.canClock(item)) {
				uni.showToast({
					title: this.getStatusText(item),
					icon: 'none'
				})
				return
			}

			this.clockItem = item
			// 根据地址查找匹配的配置对象
			this.clockItem.infoAddress = this.config.find(config => config.shortName === item.address)
			
			// 更新时间显示
			const updateTime = () => {
				let now = new Date()
				let hours = now.getHours()
				let minutes = now.getMinutes()
				let seconds = now.getSeconds()
				hours = hours < 10 ? '0' + hours : hours
				minutes = minutes < 10 ? '0' + minutes : minutes
				seconds = seconds < 10 ? '0' + seconds : seconds
				this.currentTime = `${hours}:${minutes}:`
				this.currentSeconds = seconds
			}
			updateTime()
			this.timer = setInterval(updateTime, 1000)
			console.log(this.clockItem, 'this.clockItem');
			this.$refs.clockPopup.open('bottom')
		},

		// 修改弹窗关闭事件
		clockPopupChange(e) {
			if (!e.show) {
				clearInterval(this.timer)
			}
		},

		// 修改打卡方法
		clokcClick() {
			// return
			uni.showLoading({
				title: '打卡中...',
				mask: true
			})
			uni.getSetting({
				success: (res) => {
					if (!res.authSetting['scope.userLocation']) {
						uni.authorize({
							scope: 'scope.userLocation',
							success: () => {
								this.getLocationAndCheck()
							},
							fail: () => {
								this.$refs.toast.show({
									type: 'warning',
									message: '需要位置权限才能打卡，请开启',
									duration: 3000
								})
								uni.hideLoading()
								setTimeout(() => {
									uni.openSetting({
										success: (settingRes) => {
											if (settingRes.authSetting['scope.userLocation']) {
												this.getLocationAndCheck()
											}
										}
									})
								}, 1000)
							}
						})
					} else {
						this.getLocationAndCheck()
					}
				}
			})

		},

		// 获取位置并检查是否可打卡
		getLocationAndCheck() {
			// uni.hideLoading()
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					const currentLat = res.latitude
					const currentLng = res.longitude

					// 
					const location = {
						latitude: this.clockItem.location.split(',')[0],
						longitude: this.clockItem.location.split(',')[1]
					}
					const configLat = location.latitude
					const configLng = location.longitude
					console.log(currentLat, currentLng, configLat, configLng, 'currentLat, currentLng, configLat, configLng');

					// 计算距离(米)
					const distance = this.getDistance(currentLat, currentLng, configLat, configLng)
					console.log(this.clockItem, 'this.clockItem', distance);
					// return
					if (distance <= 500) { // 在500米范围内
						// 调用打卡接口
						punchClock({
							chapterId: this.clockItem.chapterId,
							itemId: this.clockItem.timesId,  // 课程id
							studentId: this.userinfo.id,  // 学生id
							teamId: this.clockItem.teamId,  // 班级id
							endTime: this.clockItem.endTime,  // 结束时间
							startTime: this.clockItem.startTime,  // 开始时间
							timeId: this.clockItem.timesId,  // 时间id
							latitude: currentLat,
							longitude: currentLng
						}).then(res => {
							uni.hideLoading()
							// 打卡成功
							this.$refs.toast.show({
								type: 'success',
								message: '打卡成功，请开始上课',
								duration: 3000
							})

							this.$refs.clockPopup.close()
							this.loadChapterDateList() // 刷新数据
						}).catch(err => {
							// 打卡失败
							uni.hideLoading()
							this.$refs.toast.show({
								type: 'error',
								message: err.message || '打卡失败',
								duration: 5000
							})
						})
					} else {
						uni.hideLoading()
						// 不在打卡范内
						this.$refs.toast.show({
							type: 'error',
							message: `不在打卡范围内，距离打卡点${Math.round(distance)}米`,
							duration: 5000
						})
					}
				},
				fail: (err) => {
					uni.hideLoading()
					console.error('获取位置失败:', err)
					this.$refs.toast.show({
						type: 'error',
						message: '获取位置失败',
						duration: 5000
					})
				}
			})
		},
		clickToDay() {
			this.$refs.calendarTime.backToday();
			const date = new Date();
			this.today = this.parseTime(date, '{y}-{m}-{d}')
		},
		// 点击日历中的日期
		async calendarChange(e) {
			console.log(e, 'e');
			
			this.selectedDate = this.parseTime(e.fulldate, '{y}-{m}-{d}')
			if (!this.userinfo || !this.userinfo.id) {
				return
			}
			try {
				// 获取日历中日期的课程列表
				let params = {
					date: this.selectedDate
				}

				// 获取课程日期列表
				const dateRes = await getCourseDateList(params)
				if (dateRes && dateRes.data) {
					this.timeList = dateRes.data

					// 如果有时间数据，设置第一个时间段为当前选中
					if (this.timeList.length > 0) {
						this.currentIndex = 0 // 重置选中索引为第一个
						this.timeQuery = {
							start: params.date + ' ' + this.timeList[0].startTime,
							end: params.date + ' ' + this.timeList[0].endTime
						}
						console.log(this.txt_fold, 'this.txt_fold');
						if (this.txt_fold == '收起') {
							this.FoldClick()
						}
						this.loadChapterDateList()

					} else {
						this.timeList = []
						this.itemData = []
					}
				} else {
					this.timeList = []
					this.itemData = []
				}
			} catch (err) {
				console.error('切换日期失败:', err)
				uni.showToast({
					title: '切换日期失败',
					icon: 'none'
				})
			}
		},
		toMonths(val) {
			this.onClassId = val
			if (this.txt_fold == "展开") {
				this.$refs.calendarTime.FoldClick();
			}
		},
		lookTraining(item) {
			console.log(item);
			// return
			uni.navigateTo({
				url: `/pages/time/training?courseId=${item.courseid}&chapterId=${item.id}`
			})
		},
		infoTraining(item) {
			// return
			uni.setStorageSync('opcData', {
				opc: item.opc,
				opcname: item.title,
				courseId: item.courseid,
			})
			// return
			if (item.chaptersTitle.includes('科目三')) {
				uni.setStorageSync('navIndex', 2)
			}
			if (item.chaptersTitle.includes('科目一')) {
				uni.setStorageSync('navIndex', 0)
			}
			if (item.chaptersTitle.includes('科目二')) {
				uni.setStorageSync('navIndex', 1)
			}
			if (item.chaptersTitle.includes('科目四')) {
				uni.setStorageSync('navIndex', 3)
			}
			uni.switchTab({
				url: `/pages/practicalTest/practicalTest`
			})
		},
		FoldClick() {
			this.$refs.calendarTime.FoldClick();
		},
		foldSwitch(val) {
			console.log(val, 'val');
			this.icon_fold = val.status == 'close' ? "icon-down2" : "icon-erjiyemianjiantou01-copy"
			this.txt_fold = val.status == 'close' ? "展开" : "收起"
		},
		updateTimeInfoHeight() {
			try {
				const systemInfo = uni.getSystemInfoSync()
				const query = uni.createSelectorQuery().in(this)

				query.select('.time-info-left')
					.boundingClientRect(data => {
						if (data) {
							this.timeInfoH = Math.round(systemInfo.windowHeight - data.top) + 'px'
						}
					})
					.exec()
			} catch (err) {
				console.error('计算高度失败:', err)
				// 设置一个默认高度
				this.timeInfoH = '100vh'
			}
		},
		// 修改获取时间状态的方法
		getTimeStatus(item) {
			// 只取日期部分（兼容 this.selectedDate 可能带时分）
			let dateStr = this.selectedDate.split(' ')[0]; // 例如 '2025-06-08'
			let now = Date.now(); // 当前真实时间戳

			// 拼接完整的开始、结束时间字符串
			let startDateTimeStr = dateStr + ' ' + item.startTime;
			let endDateTimeStr = dateStr + ' ' + item.endTime;

			let startTimestamp = new Date(startDateTimeStr.replace(/-/g, '/')).getTime();
			let endTimestamp = new Date(endDateTimeStr.replace(/-/g, '/')).getTime();

			// 跨天容错：如果结束时间小于开始时间，说明跨天，endTimestamp +1天
			if (endTimestamp < startTimestamp) {
				endTimestamp += 24 * 60 * 60 * 1000;
			}

			if (now < startTimestamp) {
				return {
					icon: 'icon-weikaishi1',
					text: '未开始',
					status: 'not-start'
				}
			} else if (now >= startTimestamp && now <= endTimestamp) {
				return {
					icon: 'icon-jinhangzhong',
					text: '进行中',
					status: 'in-progress'
				}
			} else {
				return {
					icon: 'icon-yijieshu3',
					text: '已结束',
					status: 'ended'
				}
			}
		},
		// 计算两点之间的距离(米)
		getDistance(lat1, lng1, lat2, lng2) {
			const radLat1 = (lat1 * Math.PI) / 180.0
			const radLat2 = (lat2 * Math.PI) / 180.0
			const a = radLat1 - radLat2
			const b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0
			const s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)))
			const EARTH_RADIUS = 6378.137 // 地球半径
			return s * EARTH_RADIUS * 1000
		},


		// 获取状态文本
		getStatusText(item) {
			const now = Date.now()
			if (now < item.startTime) {
				return '未开始'
			} else if (now > item.endTime) {
				return '已结束'
			} else {
				return '进行中'
			}
		},

		// 获取状态样式类
		getStatusClass(item) {
			const now = Date.now()
			if (now < item.startTime) {
				return 'tag-not-start'
			} else if (now > item.endTime) {
				return 'tag-ended'
			} else {
				return 'tag-in-progress'
			}
		},

		// 判断是否可打卡
		canClock(item) {
			if (item.punch) {
				return false
			}
			const now = Date.now()
			return now >= item.startTime && now <= item.endTime
		},

		// 获取打卡按钮文本
		getClockButtonText(item) {
			if (item.punch) {
				return '已打卡'
			}
			const now = Date.now()
			if (now < item.startTime) {
				return '未开始'
			} else if (now > item.endTime) {
				return '已结束'
			} else {
				return '打卡'
			}
		},
		// 合并日期和时间为时间戳
		combineDateTimeToTimestamp(date, time) {
			const dateObj = new Date(date)
			const [hours, minutes] = time.split(':')
			dateObj.setHours(parseInt(hours))
			dateObj.setMinutes(parseInt(minutes))
			return this.parseTime(dateObj, '{y}-{m}-{d} {h}:{i}')
		},
		initWebSocket() {
			console.log('initWebSocket');
			this.wsClient = new WebSocketClient({
				url: 'wss://batapi.qiananquang.com:8222',
				heartbeatInterval: 30000,
				maxReconnectAttempts: 5
			})

			this.wsClient.onTokenInvalid(() => {

				console.error('Token失效，断开连接')

				uni.removeStorageSync('token')

				// setTimeout(() => {
				// 	uni.redirectTo({
				// 		url: '/pages/login/login'
				// 	})
				// }, 1500)
			})

			this.wsClient.onOpen(() => {
				console.log('WebSocket已连接')
				console.log(this.itemData, 'this.itemData');

			})

			this.wsClient.onMessage((res) => {
				try {
					const data = JSON.parse(res.data)
					console.log(data, '监听消息1');
					if (data.code == 200) {
						if (data.data.type == 'check') {
							console.log(data.data, this.itemData, '监听消息2');
							this.$nextTick(() => {
								this.trainNotifyMessage = '恭喜你！' + data.data.title + '培训通过！'
								console.log(this.trainNotifyMessage, 'this.trainNotifyMessage');
								this.$refs.trainNotify.show()
								// this.itemData.forEach(item => {
								// 	if (item.chapterId == data.data.chapterId) {
								// 		item.punch = true
								// 	}
								// })
								// this.$refs.lffBarrage.add({item:{nickname:'大橙子',courseName:'课程名称'}});
							})
						}
					}
				} catch (error) {
					console.error('解析消息失败:', error)
				}
			})

			this.wsClient.onError((error) => {
				console.error('WebSocket 错误:', error)
			})

			this.wsClient.onClose(() => {
				console.log('WebSocket 已关闭')
			})

			this.wsClient.connect()
		},
		handlePunchMessage(data) {
			if (data.success) {
				this.$refs.toast.show({
					type: 'success',
					message: '打卡成功'
				})
				this.loadChapterDateList()
			}
		},

		handleCourseMessage(data) {
			if (data.courseId === this.clockItem.id) {
				Object.assign(this.clockItem, data.course)
			}
			this.getTimeList()
		},

		handleNotificationMessage(data) {
			this.$refs.toast.show({
				type: data.level || 'info',
				message: data.message
			})
		},
		// 显示考试培训时间弹窗
		showExamPopup() {
			if (!this.hasConfirmed) {
				this.$refs.examPopup.open()
				this.startCountdown()
			}
		},
		openExamPopup() {
			let token = uni.getStorageSync('token')
			if (!token) {
				uni.showToast({
					title: '请先购买课程,才能查看考试培训时间',
					icon: 'none'
				})
				return
			}
			this.qrCodeLook = false
			if (this.examData.length) {
				this.$refs.examPopup.open()
				this.countdown = 0
				this.currentTabIndex = 0
			} else {
				uni.showToast({
					title: '老师已经在安排考试了,请稍后再试',
					icon: 'none'
				})
			}
			// this.startCountdown()
		},
		openActionSheetTrain() {
			let token = uni.getStorageSync('token')
			if (!token) {
				uni.showToast({
					title: '请先购买课程,才能查看考试培训时间',
					icon: 'none'
				})
				return
			}
			this.qrCodeLook = false
			if (this.examData.length == 0) {
				return uni.showToast({
					title: '培训安排中,请稍后再试',
					icon: 'none'
				})
			}
			if (this.examData.length > 1) {
				this.listTrain = this.examData.map((item) => ({
					name: item.courseName + item.teamName,
					fontSize: '16',
					data: item
				}))
				this.$refs.actionSheetTrain.open();
			} else {
				uni.navigateTo({ url: '/pages/time/checkUser?courseId=' + this.examData[0].courseId + '&studentId=' + this.userinfo.id + '&student=true' })
			}
		},
		selectTrain(e) {
			console.log(e.data, 'e', this.examData);
			// return
			if (this.qrCodeLook) {
				this.qrCodeLook = true
				this.qrItemData = e.data
				// 构造二维码内容
				this.qrCodeData = `http://student.qiananquang.com/#/pages/subject/subject?studentId=${this.userinfo.id}&courseId=${e.data.courseId}&chapterId=${e.data.course.chapters[0].id}`;
				console.log(this.qrCodeData, 'this.qrCodeData');

				// 打开弹窗
				this.$refs.qrCodePopup.open();

				// $nextTick 确保弹窗和组件渲染完毕后生成二维码
				this.$nextTick(() => {
					if (this.$refs.qrcode) {
						this.$refs.qrcode._makeCode();
					} else {
						console.error('tki-qrcode ref not found');
					}
				});
			} else {
				uni.navigateTo({ url: '/pages/time/checkUser?courseId=' + e.data.courseId + '&studentId=' + this.userinfo.id + '&student=true' })
			}
		},
		closeTrain() {

		},


		// 开始倒计时
		startCountdown() {
			// 如果已确认过，不需要倒计时
			if (this.currentTeam.confirmDate) {
				this.countdown = 0
				return
			}

			this.startTime = Date.now()
			this.endTime = this.startTime + 10000 // 15秒
			this.countdown = 10
			this.updateCountdown()
		},

		// 更新倒计时
		updateCountdown() {
			const now = Date.now()
			const remaining = Math.max(0, Math.ceil((this.endTime - now) / 1000))

			if (this.countdown !== remaining) {
				this.countdown = remaining
			}

			if (remaining > 0) {
				this.timer = setTimeout(() => {
					this.updateCountdown()
				}, 1000)
			}
		},
		switchTab(index) {
			this.currentTabIndex = index
			this.hasConfirmed = false
			this.startCountdown()
		},

		// 确认时间安排
		async confirmSchedule() {
			// 如果已确认过，直接显示下一个或关闭
			if (this.currentTeam.confirmDate) {
				if (this.hasNextTeam) {
					this.showNextTeam()
				} else {
					this.closeExamPopup()
				}
				return
			}

			// 未确认且在倒计时中，不允许确认
			if (this.needCountdown && this.countdown > 0) return

			try {
				// 调用确认接口
				await confirmExamDate({ teamId: this.examData[this.currentTabIndex].teamId })

				// 更新当前班级的确认状态
				this.examData[this.currentTabIndex].confirmDate = new Date().toISOString()

				if (this.hasNextTeam) {
					uni.showToast({
						title: '确认成功，可查看下一个班级',
						icon: 'none',
						duration: 2000
					})
				} else {
					this.closeExamPopup()
				}
			} catch (err) {
				console.error('确认失败:', err)
				uni.showToast({
					title: '确认失败，请重试',
					icon: 'none'
				})
			}
		},

		// 显示下一个班级
		showNextTeam() {
			if (!this.hasNextTeam) return

			this.currentTabIndex++

			if (this.timer) {
				clearTimeout(this.timer)
			}

			// 根据确认状态决定是否开始倒计时
			this.startCountdown()
		},

		// 关闭弹窗
		closeExamPopup() {
			if (this.timer) {
				clearTimeout(this.timer)
			}
			this.$refs.examPopup.close()
		},

		// 组件销毁时清理
		onUnload() {
			if (this.timer) {
				clearTimeout(this.timer)
			}
		},
		previewQRCode() {
			// 检查是否有课程数据用于生成二维码

			if (this.examData.length == 0) {
				return uni.showToast({
					title: '培训安排中,请稍后再试',
					icon: 'none'
				})
			}
			console.log(this.examData);

			if (this.examData.length > 1) {
				this.listTrain = this.examData.map((item) => ({
					name: item.courseName + item.teamName,
					fontSize: '16',
					data: item
				}))
				this.qrCodeLook = true
				this.$refs.actionSheetTrain.open();
			} else {
				// 构造二维码内容
				this.qrCodeData = `http://student.qiananquang.com/#/pages/subject/subject?studentId=${this.userinfo.id}&courseId=${this.examData[0].courseId}&chapterId=${this.examData[0].course.chapters[0].id}`;
				// console.log(this.examData);
				console.log(this.qrCodeData, 'this.qrCodeData1');


				this.qrItemData = this.examData[0]
				// 打开弹窗
				this.$refs.qrCodePopup.open();

				// $nextTick 确保弹窗和组件渲染完毕后生成二维码
				this.$nextTick(() => {
					if (this.$refs.qrcode) {
						this.$refs.qrcode._makeCode();
					} else {
						console.error('tki-qrcode ref not found');
					}
				});
			}
		},

		// Method to handle QR code popup tab switching
		switchQrCodeTab(index) {
			if (this.qrCodePopupCurrentTab === index) return; // Do nothing if clicking the active tab

			this.qrCodePopupCurrentTab = index;
			const selectedItem = this.examData[index];

			// Ensure chapter data exists
			let chapterId = null;
			if (selectedItem.course && selectedItem.course.chapters && selectedItem.course.chapters.length > 0) {
				// Use the first chapter's ID for the QR code, adjust if needed
				// 使用第一个章节的ID生成二维码，如果需要请调整
				chapterId = selectedItem.course.chapters[0].id;
			} else {
				console.warn('Selected course has no chapter data for QR code');
				uni.showToast({ title: '缺少章节信息', icon: 'none' });
				this.qrCodeData = ''; // Clear QR code data if chapter is missing // 如果缺少章节，则清除二维码数据
			}

			if (chapterId) {
				// Regenerate QR code data for the selected tab
				this.qrCodeData = `http://student.qiananquang.com/#/pages/subject/subject?studentId=${this.userinfo.id}&courseId=${selectedItem.courseId}&chapterId=${chapterId}`;
				console.log('Updated QR Code Data:', this.qrCodeData);
			}

			// Regenerate the QR code visual
			this.$nextTick(() => {
				if (this.$refs.qrcode) {
					// Ensure the component's internal value is updated before making the code
					// 确保在生成代码前更新组件的内部值
					this.$refs.qrcode.val = this.qrCodeData;
					this.$refs.qrcode._makeCode();
				} else {
					console.error('tki-qrcode ref not found');
				}
			});
		},
		// 二维码弹窗状态变化处理
		qrCodePopupChange(e) {
			console.log('QR Code Popup Change:', e);
			if (!e.show) {
				console.log('QR Code Popup closed, refreshing data...');
				// 弹窗关闭时刷新数据
				this.loadData();
			}
		},
		// 新增: 地址导航方法
		navigateToAddress(item) {
			console.log(item, 'item');

			if (!item || !item.location || typeof item.location !== 'string') {
				uni.showToast({
					title: '位置信息无效',
					icon: 'none'
				});
				return;
			}

			const parts = item.location.split(',');
			if (parts.length !== 2) {
				uni.showToast({
					title: '位置坐标格式错误',
					icon: 'none'
				});
				return;
			}

			const latitude = parseFloat(parts[0]);
			const longitude = parseFloat(parts[1]);

			if (isNaN(latitude) || isNaN(longitude)) {
				uni.showToast({
					title: '无效的经纬度',
					icon: 'none'
				});
				return;
			}

			uni.openLocation({
				latitude: latitude,
				longitude: longitude,
				name: item.address || '培训地点',
				address: item.address || '',
				success: function () {
					console.log('打开地图成功');
				},
				fail: function (err) {
					console.error('打开地图失败:', err);
					uni.showToast({
						title: '打开地图失败',
						icon: 'none'
					});
				}
			});
		},
	},
	onShareAppMessage() {
		return {
			title: '考前练一练，考试轻松过',
			path: '/pages/index/index'
		}
	},
	onShareTimeline() {
		return {
			title: '考前练一练，考试轻松过',
			path: '/pages/index/index',
			imageUrl: 'https://img.qiananquang.com/app/images/2025-01-11/a5d68acc-f495-4f6a-8410-5bb1ffc8426c.png'
		}
	},
	onHide() {
		if (this.wsClient) {
			this.wsClient.close()
			this.wsClient = null
		}
	},
	onUnload() {
		if (this.wsClient) {
			this.wsClient.close()
			this.wsClient = null
		}
		if (this.timer) {
			clearTimeout(this.timer)
		}
	}
}
</script>

<style lang="scss" scoped>
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	opacity: 0;
}

.time {
	background: linear-gradient(180deg, #FC3826, #F49D95);
	background-size: 100% 185rpx;
	background-repeat: no-repeat;
}

.header-info {
	padding-left: 40rpx;
	display: flex;
	align-items: center;
	padding: 0rpx 0 15rpx 40rpx;

	image {
		width: 74rpx;
		height: 74rpx;
		border-radius: 50%;
		border: 6rpx solid #fff;
	}

	text {
		padding-left: 24rpx;
		color: #fff;
		font-size: 34rpx;
	}
}

.custom-header {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background: #FAFAFE;

	.h3-title {
		font-size: 26rpx;
		color: #333333;
		background: #0086FF;
		border-radius: 10rpx;
		padding: 0 10rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #fff;
	}

	.time-right {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.today {
			background: #EFF7FF;
			border-color: #0086FF;
			color: #0086FF;
			font-size: 28rpx;
			margin-right: 18rpx;
		}

		.fold-box {
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			border: 3rpx solid #F1F5F9;

			.iconfont {
				color: #999;
				padding-left: 8rpx;
			}
		}

		text {
			padding: 0 20rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			border: 3rpx solid #F1F5F9;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.train-months {
		display: flex;

		text {
			margin-left: 10rpx;
			padding: 0 20rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			border: 3rpx solid #F1F5F9;
			font-size: 28rpx;
			color: #333333;
		}
	}
}

.time-info {
	flex: 1;
	display: flex;
	background: #FAFAFE;
	// 计算高度：屏幕高度 - 状态栏 - 导航栏 - 背景图高度(185rpx) - 日历高度
	// height: calc(100vh - var(--status-bar-height) - 44px - 185rpx - 100rpx);
	overflow: hidden;

	.time-info-left {
		width: 160rpx;
		height: 100%;
		background: #F7F6F9;
		border-radius: 0rpx 9rpx 9rpx 9rpx;

		.time-list-scroll {
			height: 100%;
		}

		.time-conent-list {
			text-align: center;
			padding: 35rpx 0;

			.time-range {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.line {
					width: 4rpx;
					height: 30rpx;
					background: #E1E1E1;
					border-radius: 2rpx;
					margin: 5rpx 0;
				}

				text {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					display: block;
				}
			}

			.time-conent-icon {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 10rpx;
				font-weight: 600;
				font-size: 22rpx;

				.iconfont {
					margin-right: 5rpx;
				}

				&.not-start {
					color: #B9B9C0;

					.iconfont {
						color: #B9B9C0;
					}
				}

				&.in-progress {
					color: #0086FF;

					.iconfont {
						color: #0086FF;
					}
				}

				&.ended {
					color: #FD3523;

					.iconfont {
						color: #FD3523;
					}
				}
			}
		}

		.way {
			.time-range {
				text {
					color: #333333;
				}
			}

			.time-conent-icon {
				color: #FD3523;
			}
		}

		.on {
			background: #fff;
		}

		.active {
			background-color: rgb(213, 235, 255);
			border-radius: 0rpx 9rpx 9rpx 9rpx;

			.time-range text {
				color: #fff;
			}

			.time-conent-icon {
				color: #fff;

				.iconfont {
					color: #fff;
				}
			}
		}
	}

	.time-info-right {
		flex: 1;
		height: 100%;
		background: #fff;

		.time-info-scroll {
			height: 100%;
		}

		.list-item-box {
			// padding: 30rpx;
			background: #FFFFFF;
		}

		.list-item {
			box-shadow: 0rpx 10rpx 57rpx 0rpx rgba(0, 0, 0, 0.09);
			border-radius: 10rpx;
			padding-bottom: 20rpx;

			.list-item-img {
				position: relative;
				// width: 100%;
				height: 300rpx;
				padding: 0 25rpx;

				.tips {
					position: absolute;
					width: 100%;
					height: 100%;
					background: rgba(0, 0, 0, 0.5);
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 2;
					display: flex;
					justify-content: center;
					align-items: center;

					.iconfont {
						font-size: 200rpx;
						color: #fff;
					}
				}

				.status-label {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					padding: 4rpx 0;
					background: rgba(0, 0, 0, 0.5);
					color: #fff;
					font-size: 24rpx;
					text-align: center;
					z-index: 2;
				}

				image {
					width: 100%;
					height: 100%;
					border-radius: 6rpx 6rpx 0rpx 0rpx;
					opacity: 0.6; // 添加半明效果
				}

				// 进行中状态不显示遮罩
				&:not(.disabled) {
					image {
						opacity: 1;
					}
				}
			}

			.progress-box {
				background: #F8F9FC;
				padding: 20rpx;
				border-radius: 12rpx;

				.progress-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 12rpx;

					.progress-value {
						font-size: 26rpx;
						color: #333;
					}

					.percentage {
						font-size: 24rpx;
						color: #0086FF;
						background: rgba(0, 134, 255, 0.1);
						padding: 2rpx 8rpx;
						border-radius: 4rpx;
					}

					text {
						font-size: 26rpx;
						color: #666;

						&.progress-value {
							color: #0086FF;
							font-weight: 500;
						}
					}
				}

				.charge {
					font-size: 24rpx;
					color: #999;
					margin-top: 12rpx;
					display: block;
				}
			}

			.list-item-mid {
				padding: 0 25rpx;

				text {
					display: block;
					font-weight: 400;
					font-size: 24rpx;
					color: #6F7581;
					line-height: 40rpx;
				}

				.list-item-title {
					display: flex;
					justify-content: space-between;
					align-items: center;

					text {
						font-weight: 700;
						font-size: 28rpx;
						color: #12141A;
					}

					.tag {
						font-size: 24rpx;
					}

					.standard {
						color: #0086FF;
					}

					.fail {
						color: #FD3523;
					}

					.not {
						color: #6F7581;
					}
				}

				.list-item-info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;
					color: #6F7581;
				}

			}

			.list-item-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 10rpx 0 10rpx;

				.btn {
					width: 160rpx;
					height: 70rpx;
					border-radius: 8rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 70rpx;
					padding: 0;
				}

				::v-deep button[disabled] {
					opacity: 0.5;
				}

				.is-hover {
					opacity: 0.5;
				}

				.sign {
					background: #0086FF;
					box-shadow: 0rpx 6rpx 18rpx 0rpx rgba(0, 134, 255, 0.35);
				}

				.look {
					background: #FD3523;
					box-shadow: 0rpx 6rpx 18rpx 0rpx rgba(253, 53, 35, 0.35);
				}

				.info {
					background: #47e571;
					box-shadow: 0rpx 6rpx 18rpx 0rpx rgba(0, 255, 149, 0.35);
				}
			}
		}
	}

	.empty-state {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
}

.clock_popup {
	// background: #fff;
	// border-radius: 30rpx 30rpx 0rpx 0rpx;
	padding-top: 65rpx;
	padding-bottom: 90rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	.clock-title {
		font-size: 26rpx;
	}

	.clock-teacher {
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #A5AAB4;
	}

	.clock-btn {
		background: #0086FF;
		box-shadow: 0rpx 6rpx 18rpx 0rpx rgba(0, 134, 255, 0.35);
		border-radius: 50%;
		width: 270rpx;
		height: 270rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 40rpx;

		text {
			font-weight: 700;
			font-size: 40rpx;
			color: #FFFFFF;

		}
	}

	.location-box {
		display: flex;
		justify-content: center; // 改为 space-between 以便刷新按钮靠右
		align-items: center;
		font-weight: 500;
		font-size: 26rpx;
		color: #A5AAB4;
		width: 80%; // 给定一个宽度，可以根据实际情况调整

		.location-info {
			display: flex;
			align-items: center;
			cursor: pointer; // 添加手型光标

			.icon-dingwei {
				font-size: 28rpx;
				margin-right: 8rpx; // 图标和文字间距
			}
		}

		.icon-gengxin {
			font-size: 30rpx; // 调整刷新图标大小
			color: $uni-color-primary; // 给刷新图标一个可点击的颜色
			cursor: pointer; // 添加手型光标
		}
	}
}

.clockNotify {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26rpx;
	color: #FFFFFF;
}

::v-deep .uv-notify--error {
	background: #FD3523FF;
}

::v-deep .uv-notify--success {
	background: #0086FFFF;
}

::v-deep .uv-notify--warning {
	background: #FFA213FF;
}

// 适配 iPhone X 等机型
// @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
// 	.time-info {
// 		height: calc(100vh - var(--status-bar-height) - 44px - 185rpx - 100rpx - constant(safe-area-inset-bottom));
// 		height: calc(100vh - var(--status-bar-height) - 44px - 185rpx - 100rpx - env(safe-area-inset-bottom));
// 	}
// }

.list-item {
	.tag {
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
		font-size: 24rpx;

		&.tag-not-start {
			background: #E6E6E6;
			color: #999;
		}

		&.tag-in-progress {
			background: #E6F7FF;
			color: #1890FF;
		}

		&.tag-ended {
			background: #F5F5F5;
			color: #666;
		}

		&.tag-simulation {
			background: #E6F3FF;
			color: #409EFF;
		}
	}

	.btn {

		&.disabled,
		&.punched {
			opacity: 0.5;
			background: #999 !important;
			color: #fff !important;
		}

		&.punched {
			background: #52c41a !important; // 已打卡使用绿色
		}
	}
}

.exam-popup {
	width: 640rpx;
	background: #FFFFFF;
	border-radius: 24rpx;

	// height: 80%;
	.popup-header {
		padding: 30rpx 24rpx;
		text-align: center;
		background: linear-gradient(180deg, #FFF6F6 0%, #FFFFFF 100%);
		border-radius: 24rpx 24rpx 0 0;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #1A1A1A;
			margin-bottom: 12rpx;
		}

		.header-desc {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #666;
			font-size: 24rpx;

			.iconfont {
				color: #FF4D4F;
				margin-right: 8rpx;
				font-size: 24rpx;
			}
		}
	}

	.exam-content {
		padding: 20rpx;
		width: auto;
		max-height: calc(85vh - 500rpx);
	}

	.exam-item {
		background: #fff;
		border-radius: 16rpx;

		.course-info {
			background: #FFF1F0;
			padding: 16rpx 20rpx;
			border-radius: 12rpx;
			margin-bottom: 16rpx;
			display: flex;
			justify-content: space-between;

			.info-left {
				display: flex;
				align-items: center;
				flex: 1;

				.iconfont {
					color: #FF4D4F;
					margin-right: 12rpx;
					font-size: 28rpx;
				}

				.team-name {
					font-size: 28rpx;
					font-weight: bold;
					color: #1A1A1A;
				}
			}

			.course-type {
				background: #FFFFFF;
				color: #FF4D4F;
				padding: 4rpx 16rpx;
				border-radius: 24rpx;
				font-size: 22rpx;
				font-weight: 500;
			}
		}

		.exam-card,
		.training-card {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 20rpx;
			margin-bottom: 16rpx;
			border: 2rpx solid #F5F5F5;

			.card-title {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				.iconfont {
					color: #FF4D4F;
					font-size: 28rpx;
					margin-right: 12rpx;
				}

				text {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
				}
			}

			.time-item {
				background: #FFF7F7;
				border-radius: 12rpx;
				padding: 16rpx;
				margin-bottom: 12rpx;

				.time-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 12rpx;

					.exam-type {
						font-size: 26rpx;
						font-weight: 500;
						color: #333;
					}
				}

				.exam-status {
					font-size: 24rpx;
					padding: 4rpx 16rpx;
					border-radius: 20rpx;

					&.upcoming {
						background: #FFF1F0;
						color: #FF4D4F;
					}

					&.ended {
						background: #F5F5F5;
						color: #999;
					}
				}

				.time-info {
					display: flex;
					align-items: center;
					margin-bottom: 12rpx;

					.iconfont {
						color: #666;
						font-size: 28rpx;
						margin-right: 8rpx;
					}

					.date {
						font-size: 26rpx;
						color: #333;
					}

					.time {
						font-size: 26rpx;
						color: #666;
					}
				}

				.retake-info {
					margin-top: 12rpx;
					padding-top: 12rpx;
					border-top: 2rpx solid #F0F0F0;
					display: flex;
					align-items: center;
					color: #FD3523;
					font-size: 24rpx;

					.iconfont {
						margin-right: 8rpx;
						font-size: 28rpx;
					}
				}
			}
		}

		.training-card {
			.chapter-item {
				margin-bottom: 16rpx;

				.chapter-header {
					display: flex;
					align-items: center;
					margin-bottom: 12rpx;

					.chapter-name {
						font-size: 26rpx;
						font-weight: 500;
						color: #333;
					}
				}

				.date-item {
					background: #FFF7F7;
					padding: 16rpx;
					border-radius: 12rpx;
					margin-bottom: 12rpx;

					.date-header {
						display: flex;
						align-items: center;
						margin-bottom: 12rpx;

						.date {
							font-size: 24rpx;
							color: #333;
						}
					}

					.time-list {
						display: flex;
						flex-wrap: wrap;
						gap: 8rpx;

						.time {
							display: inline-flex;
							align-items: center;
							background: #FFFFFF;
							padding: 6rpx 12rpx;
							border-radius: 8rpx;
							font-size: 22rpx;
							color: #666;

							.iconfont {
								font-size: 24rpx;
								margin-right: 6rpx;
								color: #999;
							}
						}
					}
				}
			}
		}

		.popup-footer {
			padding: 20rpx;

			.confirm-btn,
			.next-btn {
				width: 100%;
				height: 88rpx;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;

				.iconfont {
					margin-right: 8rpx;
					font-size: 36rpx;
				}
			}

			.confirm-btn {
				background: #0086FF;
				color: #FFFFFF;

				&.disabled {
					background: #CCCCCC;
					cursor: not-allowed;
				}
			}

			.next-btn {
				background: #E6F7FF;
				color: #0086FF;
				border: 2rpx solid #0086FF;

				&:active {
					opacity: 0.8;
				}
			}
		}
	}
}

.class-tabs {
	background: #FFFFFF;
	border-bottom: 2rpx solid #F5F5F5;

	.tabs-scroll {
		white-space: nowrap;
		// padding: 0 20rpx;
		width: 100%;
		overflow: hidden;
	}

	.tabs-list {
		display: inline-flex;
		padding: 16rpx 20rpx;
		flex-wrap: nowrap;
		width: auto;
	}

	.tab-item {
		padding: 12rpx 30rpx;
		margin-right: 20rpx;
		background: #F6F6F6;
		border-radius: 32rpx;

		.tab-name {
			font-size: 26rpx;
			color: #666;
			white-space: nowrap;
		}

		&.active {
			background: #FFF1F0;

			.tab-name {
				color: #FF4D4F;
				font-weight: 500;
			}
		}

		&:last-child {
			margin-right: 0;
		}
	}
}

// 优化滚动区域
.tabs-scroll {
	&::-webkit-scrollbar {
		display: none;
	}
}

// 优化标签样式
.tab-item {
	transition: all 0.3s ease;
	position: relative;

	&.active::after {
		content: '';
		position: absolute;
		bottom: -4rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40%;
		height: 4rpx;
		background: #FF4D4F;
		border-radius: 2rpx;
	}
}

// 优化时间显示
.time-info {

	.date,
	.time {
		display: inline-flex;
		align-items: center;

		.iconfont {
			margin-right: 4rpx;
			font-size: 24rpx;
		}
	}
}

// 添加自定义悬浮按钮样式
.custom-fab {
	position: fixed;
	right: 30rpx; // 水平靠右
	bottom: 120rpx; // 垂直靠底，可根据需要调整
	width: 100rpx; // 按钮宽度
	height: 100rpx; // 按钮高度
	background-color: #0086FF; // 背景颜色同原 fab
	border-radius: 50%; // 圆形按钮
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4rpx 12rpx rgba(0, 134, 255, 0.35); // 添加阴影
	z-index: 99; // 确保在顶层

	.iconfont {
		font-size: 50rpx; // 图标大小
		color: #ffffff; // 图标颜色
	}
}

// 二维码弹窗样式
.qrcode-popup-content {
	// width: 90%;
	padding: 50rpx 40rpx 40rpx 40rpx; // 增加上下内边距
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #fff;
	border-radius: 15rpx;
	box-sizing: border-box; // 确保 padding 不会撑大宽度

	.title {
		font-size: 34rpx; // 稍微增大标题
		font-weight: bold;
		margin-bottom: 40rpx; // 增加标题下方间距
		color: #303133; // 深一点的颜色
	}

	.info-item {
		width: 100%;
		display: flex;
		// justify-content: flex-start; /* 改为space-between实现两端对齐 */
		justify-content: space-between; // 标签和值两端对齐
		align-items: center;
		margin-bottom: 25rpx; // 增加信息项间距
		font-size: 28rpx;

		.label {
			color: #666;
			// width: 160rpx; /* 移除固定宽度 */
			// text-align: right; /* 无需右对齐 */
			margin-right: 20rpx; // 保留一些右边距
			flex-shrink: 0; // 防止标签被压缩
		}

		.value {
			color: #333;
			flex: 1;
			/* 值部分占据剩余空间 */
			text-align: right; // 值内容右对齐
			word-break: break-all;
			/* 防止长内容溢出 */
		}
	}

	.qrcode-component {
		margin: 30rpx 0; // 调整二维码上下间距
		// 可以考虑给二维码容器加个边框，如果组件本身不带
		// border: 1px solid #f0f0f0;
		// padding: 10rpx;
		// background-color: #fdfdfd;
		// border-radius: 8rpx;
	}

	.tips {
		font-size: 24rpx;
		color: #999;
		margin-top: 30rpx; // 增加提示文字上方间距
		text-align: center;
	}
}

// 调整自定义悬浮按钮位置，避免与底部安全区重叠过多
// .custom-fab {
// 	bottom: calc(120rpx + constant(safe-area-inset-bottom)); /* 考虑 iOS 安全区 */
// 	bottom: calc(120rpx + env(safe-area-inset-bottom)); /* 考虑通用安全区 */
// }

.qrcode-component {
	margin-top: 20rpx;
	margin-bottom: 15rpx;
}

.tips {
	font-size: 24rpx;
	color: #999;
	margin-top: 20rpx;
}

// Styles for QR Code Popup Tabs
.popup-tabs {
	width: 100%;
	margin-bottom: 30rpx; // Space below tabs
	border-bottom: 1rpx solid #f0f0f0; // Separator line

	.tabs-scroll {
		white-space: nowrap;
		width: 100%;
	}

	.tabs-list {
		display: inline-flex;
		padding: 10rpx 0; // Padding around tabs
	}

	.tab-item {
		padding: 15rpx 25rpx;
		margin-right: 15rpx;
		background: #f5f5f5;
		border-radius: 8rpx;
		cursor: pointer;
		transition: background-color 0.2s ease;

		.tab-name {
			font-size: 26rpx;
			color: #606266;
			white-space: nowrap;
		}

		&.active {
			background: #e6f7ff; // Use a light blue for active tab

			.tab-name {
				color: #0086FF; // Primary color for active text
				font-weight: 500;
			}
		}
	}
}

// 新增模拟成绩样式
.score-box {
	.progress-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx; // 增加标题和详情间距

		.score-title {
			font-size: 28rpx; // 与培训进度标题一致
			color: #333;
			font-weight: 500; // 加粗一点
		}

		.exam-count {
			font-size: 24rpx; // 稍小字体
			color: #999;
		}
	}

	.score-details {
		display: flex;
		justify-content: space-between; // 两端对齐
		align-items: baseline; // 基线对齐
		margin-bottom: 12rpx;

		.score-item {
			display: flex; // 改为 flex，使 label 和 value 水平排列
			align-items: baseline; // label 和 value 基线对齐

			.label {
				font-size: 24rpx;
				color: #666;
				margin-right: 6rpx; // 增加右边距
			}

			.value {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;

				&.max-score {
					color: #0086FF; // 最高分用主题色
				}

				&.min-score {
					color: #FD3523; // 最低分用红色
				}
			}
		}

		.last-time {
			display: flex;
			align-items: baseline;

			.label {
				margin-right: 8rpx;
			}

			.value {
				color: #333;
			}
		}
	}

	.score-list {
		font-size: 24rpx;
		color: #666;
	}
}

// 新增培训地址导航样式
.list-item-room-wrapper {
	display: flex;
	align-items: center;
	margin-top: 5rpx;
	/* 可根据需要调整与上方元素的间距 */
	margin-bottom: 5rpx;
	/* 可根据需要调整与下方元素的间距 */
	line-height: 40rpx;
	/* 尝试匹配父级 list-item-room 的行高 */
}

.list-item-room-wrapper .address-text {
	/* 继承自 .list-item-mid text, 但覆盖 display */
	display: inline;
	color: #6F7581;
	/* 保持原有字体颜色 */
	font-size: 24rpx;
	/* 保持原有字体大小 */
	/* flex-grow: 1; /* 允许文字占据可用空间，如果希望图标不被挤到行尾，可以去掉或调整 */
	word-break: break-word;
	/* 防止长地址破坏布局 */
}

.navigation-icon {
	/* font-family: "iconfont" !important; /* 确保使用正确的图标字体 */
	font-size: 36rpx;
	/* 图标大小，可根据视觉效果调整 */
	color: $uni-color-primary;
	/* 一个标准的链接/可操作图标颜色 */
	cursor: pointer;
	/* 鼠标悬停时显示手型指针 */
	margin-left: 10rpx;
	/* 与地址文字的间距 */
	flex-shrink: 0;
	/* 防止图标在空间不足时被压缩 */
}
</style>